<script setup lang='ts'>
// 数据就是视图 视图就是数据
import axios from 'axios';
import { ref, reactive } from 'vue'

const login_reactive = reactive<{ account: string, password: string }>({ account: 'ceshi06', password: '123456' })

// const account = ref("ceshi06")//账号
// const password = ref("123456")//密码

const login = async () => {
    // if (account.value && password.value) {
    if (login_reactive.account && login_reactive.password) {
        // const res = await axios.post('https://meikou-api.itheima.net/login', {
        //     account: account.value,
        //     password: password.value
        // })
        // alert(JSON.stringify(res.data))
        const res = await axios.post('https://meikou-api.itheima.net/login', login_reactive)
        alert(JSON.stringify(res.data))
    } else {
        alert('输入内容不能为空！')
    }

}
</script>

<template>
    <div class="container">
        <div class="login_form">
            <!-- <input type="text" placeholder="请输入账号" v-model="account">
            <input type="password" placeholder="请输入密码" v-model="password">
            <button @click="login">登录</button> -->
            <input type="text" placeholder="请输入账号" v-model="login_reactive.account">
            <input type="password" placeholder="请输入密码" v-model="login_reactive.password">
            <button @click="login">登录</button>

        </div>
    </div>
</template>

<style scoped>
.container {
    width: "100%";
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_form {
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: pink;
}

.login_form input,
button {
    margin: 10px 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>